<template>
  <div class="menu">
    <div class="menu-content">
      <div
        class="menu-item-list"
        @mouseenter="handleMenuContainerEnter"
        @mouseleave="handleMenuContainerLeave"
      >
        <div
          class="menu-cate-container"
          :class="{ expanded: isMenuHovered || isInDetail }"
        >
          <ul class="menu-cate-menu">
            <li
              v-for="(category, index) in firstLevelCategories"
              :key="category.catId"
              class="menu-cate-li"
              :class="{
                active: activeIndex === category.catId,
                'first-item': index === 0,
                'last-item': index === firstLevelCategories.length - 1,
              }"
              @mouseenter="handleCategoryEnter(category.catId)"
              @mouseleave="handleCategoryLeave"
            >
              <i>
                <component :is="getCategoryIcon(index)" />
              </i>
              <span>{{ category.name }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="menu-item-slider">
        <div class="slider-top">
          <ul class="slider-top-list">
            <li>出口转内销</li>
            <li>新品</li>
            <li>排行榜</li>
            <li>京东拍卖</li>
            <li>京东企业购</li>
          </ul>
        </div>
        <div class="slider-content">
          <div class="slider-switch">
            <Carousel
              :images="carouselImages"
              :border-radius="'0.5rem'"
              :auto-play="true"
              :interval="3000"
            />
          </div>
          <ul class="slider-right">
            <li>
              <img
                src="https://m.360buyimg.com/babel/jfs/t20280331/277429/37/14025/25002/67eb46dfF8376f83f/204f029c8932b54c.png"
                alt=""
              />
            </li>
            <li>
              <img
                src="https://m.360buyimg.com/babel/jfs/t1/271003/34/14559/30508/67eb47d1F25c52f62/8ace764fdc8bec3f.png"
                alt=""
              />
            </li>
            <li>
              <img
                src="https://m.360buyimg.com/babel/jfs/t1/278497/12/13644/22410/67eb46ddFcc7d4802/fe4f7549e93dd50b.png"
                alt=""
              />
            </li>
          </ul>
        </div>
        <div
          class="slider-right-detail"
          @mouseenter="handleDetailEnter"
          @mouseleave="handleDetailLeave"
          :class="{
            'is-visible': activeIndex === currentCategoryId || isInDetail,
          }"
        >
          <div
            v-for="secondCategory in secondLevelCategories"
            :key="secondCategory.catId"
            class="slider-top-detail-flex"
          >
            <div class="flex-title">{{ secondCategory.name }}</div>
            <div class="flex-content">
              <ul class="slider-right-detail-list">
                <li
                  v-for="thirdCategory in getThirdLevelCategories(
                    secondCategory.catId,
                  )"
                  :key="thirdCategory.catId"
                >
                  <router-link
                    :to="{
                      path: '/list',
                      query: { catalog3Id: thirdCategory.catId },
                    }"
                    class="third-level-link"
                  >
                    {{ thirdCategory.name }}
                  </router-link>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="menu-item-tool">
        <div class="tool-top">
          <div class="tool-top-img">
            <img src="@/assets/images/user.png" alt="" />
          </div>
          <div class="tool-top-right">
            <h1>欢迎来到京东商城</h1>
            <a href="">登录</a>
            <a href="">注册</a>
          </div>
        </div>
        <div class="tool-coupon">
          <h1>新人福利</h1>
          <a href="">领3200元采购补贴</a>
        </div>
        <div class="tool-member">
          <h1>会员中心</h1>
          <a href="">查看会员权益</a>
        </div>
        <div class="tool-list">
          <ul class="tool-list-style">
            <li>
              <img src="@/assets/images/01.png" alt="" />
              <h1>工作台</h1>
            </li>
            <li>
              <img src="@/assets/images/02.png" alt="" />
              <h1>订单中心</h1>
            </li>
            <li>
              <img src="@/assets/images/03.png" alt="" />
              <h1>发票中心</h1>
            </li>
            <li>
              <img src="@/assets/images/04.png" alt="" />
              <h1>采购清单</h1>
            </li>
            <li>
              <img src="@/assets/images/05.png" alt="" />
              <h1>预算管理</h1>
            </li>
            <li>
              <img src="@/assets/images/06.png" alt="" />
              <h1>计划购</h1>
            </li>
            <li>
              <img src="@/assets/images/10.png" alt="" />
              <h1>3月简报</h1>
            </li>
            <li>
              <img src="@/assets/images/08.png" alt="" />
              <h1>电子合同</h1>
            </li>
            <li>
              <img src="@/assets/images/09.png" alt="" />
              <h1>免息账期</h1>
            </li>
            <li>
              <img src="@/assets/images/10.png" alt="" />
              <h1>自助认款</h1>
            </li>
            <li>
              <img src="@/assets/images/11.png" alt="" />
              <h1>达量返</h1>
            </li>
            <li>
              <img src="@/assets/images/12.png" alt="" />
              <h1>多地下单</h1>
            </li>
          </ul>
        </div>
        <div class="menu-item-news">
          <span>资讯</span>
          <a href="">励展华博发布《2024中国礼品行业展望白皮书》</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useHoverDelay } from '@/hooks/useHoverDelay'
import { useCategoryStore } from '@/store/modules/category'
import {
  Monitor,
  Grape,
  Bowl,
  Mug,
  DishDot,
  GobletSquare,
  Goblet,
  Pear,
  Apple,
  Dish,
} from '@element-plus/icons-vue'

const categoryStore = useCategoryStore()

const carouselImages = [
  'https://m.360buyimg.com/babel/jfs/t1/278948/1/18948/76229/67fcb149F6bcb6620/b3ad629071dc093b.jpg',
  'https://m.360buyimg.com/babel/jfs/t20280328/276830/33/12263/66585/67e76e4dF6ee64620/9bfcb11abae52b36.png',
  'https://m.360buyimg.com/babel/jfs/t20280409/279965/25/18118/44049/67f7bee7Fce9f41ff/7127a05e34b4762f.jpg',
  'https://m.360buyimg.com/babel/jfs/t20280406/273817/4/16760/75875/67f37026F5b386a6a/c92d01e0e0a3bbbd.jpg',
]

const {
  activeIndex,
  isInDetail,
  handleMenuEnter,
  handleMenuLeave,
  handleDetailEnter: originalHandleDetailEnter,
  handleDetailLeave: originalHandleDetailLeave,
} = useHoverDelay()

// 当前选中的分类ID
const currentCategoryId = ref<number>(0)

// 菜单悬停状态
const isMenuHovered = ref<boolean>(false)

// 防抖定时器
const hoverTimer = ref<number | null>(null)

// 获取一级分类
const firstLevelCategories = computed(() => {
  return categoryStore.firstLevelCategories
})

// 获取当前选中分类的二级分类
const secondLevelCategories = computed(() => {
  if (!currentCategoryId.value) return []
  return categoryStore.getChildrenByParentId(currentCategoryId.value)
})

// 获取三级分类
const getThirdLevelCategories = (parentId: number) => {
  return categoryStore.getChildrenByParentId(parentId)
}

// 处理菜单项鼠标移入（带防抖）
const handleCategoryEnter = (categoryId: number) => {
  // 清除之前的定时器
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value)
  }

  // 设置新的定时器，延迟150ms后触发
  hoverTimer.value = setTimeout(() => {
    currentCategoryId.value = categoryId
    handleMenuEnter(categoryId)
  }, 150) as unknown as number
}

// 处理菜单项鼠标移出
const handleCategoryLeave = () => {
  // 清除定时器，防止在鼠标快速移动时触发选择
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value)
    hoverTimer.value = null
  }
}

// 处理菜单容器鼠标移入
const handleMenuContainerEnter = () => {
  isMenuHovered.value = true
}

// 处理菜单容器鼠标移出
const handleMenuContainerLeave = (event: MouseEvent) => {
  const relatedTarget = event.relatedTarget as HTMLElement

  // 检查鼠标是否移到了二级菜单区域
  const isMovingToDetail = relatedTarget?.closest('.slider-right-detail')

  // 只有当鼠标没有移动到二级菜单区域时才收起一级菜单
  if (!isMovingToDetail && !isInDetail.value) {
    isMenuHovered.value = false
    handleMenuLeave()
  }

  // 清除可能存在的定时器
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value)
    hoverTimer.value = null
  }
}

// 处理二级菜单鼠标移入
const handleDetailEnter = () => {
  originalHandleDetailEnter()
  isMenuHovered.value = true // 保持一级菜单展开
}

// 处理二级菜单鼠标移出
const handleDetailLeave = (event: MouseEvent) => {
  const relatedTarget = event.relatedTarget as HTMLElement

  // 检查鼠标是否移回了一级菜单区域
  const isMovingToMenu = relatedTarget?.closest('.menu-item-list')

  // 只有当鼠标没有移回一级菜单区域时才完全隐藏
  if (!isMovingToMenu) {
    originalHandleDetailLeave()
    isMenuHovered.value = false
    handleMenuLeave()
  }
}

// 根据索引获取不同的图标
const getCategoryIcon = (index: number) => {
  const icons = [
    Monitor,
    Grape,
    Bowl,
    Mug,
    DishDot,
    GobletSquare,
    Goblet,
    Pear,
    Apple,
    Dish,
  ]
  return icons[index % icons.length] || Monitor
}

// 组件挂载时获取分类数据
onMounted(() => {
  categoryStore.fetchCategoryTree()
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (hoverTimer.value) {
    clearTimeout(hoverTimer.value)
  }
})
</script>

<style scoped lang="scss">
.menu {
  height: 34.125rem;
  background-image: url(@/assets/images/menu.png);
  background-position: 50% 0;
  background-repeat: no-repeat;

  .menu-content {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: auto;
    max-width: 74.375rem;
    height: 34.1rem;
    background: #fff;
    border-radius: 0.5rem 0 0 0.5rem;

    .menu-item-list {
      flex: 13.9875rem;
      margin: 0.625rem;
      position: relative;
      z-index: 1001; // 提高层级确保在二级菜单之上

      .menu-cate-container {
        background: #f7f8fc;
        border-radius: 0.5rem;
        transition: all 0.3s ease;

        // 默认状态 - 隐藏超出部分
        &:not(.expanded) {
          max-height: 33rem;
          overflow: hidden;
        }

        // 悬停状态 - 显示完整内容
        &.expanded {
          max-height: 50rem;
          overflow: visible;
        }

        .menu-cate-menu {
          width: 100%;
          font-size: 0.875rem;
          border-radius: 0.5rem;

          li {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.2rem 0.5rem;
            cursor: pointer;
            /* 添加过渡动画 */
            transition: all 0.2s ease;
            background: #eff2f7;

            /* 圆角处理 */
            &.first-item {
              border-radius: 0.5rem 0.5rem 0 0;
            }

            &.last-item {
              border-radius: 0 0 0.5rem 0.5rem;
            }

            /* 中间菜单项没有圆角 */
            &:not(.first-item):not(.last-item) {
              border-radius: 0;
            }

            &.active {
              background: #c5c7cb;
              /* 激活状态也添加过渡 */
              transition: background-color 0.2s ease;
            }

            &:hover {
              background: #c5c7cb;
              /* 悬停状态添加过渡 */
              transition: background-color 0.2s ease;

              /* 图标和文字颜色过渡 */
              i {
                transition: color 0.2s ease;
                color: #f56c6c;
              }

              span {
                transition: color 0.2s ease;
                color: #f56c6c;
              }
            }

            i {
              display: flex;
              align-items: center;
              color: #666;
              min-width: 16px;
              /* 图标颜色过渡 */
              transition: color 0.2s ease;

              svg {
                width: 16px;
                height: 16px;
                fill: currentColor;
                /* 图标内部过渡 */
                transition: fill 0.2s ease;
              }
            }

            span {
              position: relative;
              text-decoration: none;
              color: #333;
              /* 文字颜色过渡 */
              transition: color 0.2s ease;

              &:not(:last-child) {
                padding-right: 0.7rem;

                &::after {
                  content: '/';
                  position: absolute;
                  right: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  padding: 0 0;
                  font-size: 0.7rem;
                  color: #999;
                }
              }
            }
          }
        }
      }
    }

    .menu-item-slider {
      position: relative;
      flex: 44rem;
      flex-shrink: 0;

      .slider-top {
        height: 2.625rem;
        line-height: 2.625rem;
        background: #eff2f7;
        border-radius: 0.5rem;
        opacity: 1;
        padding: 0 1.25rem;
        margin: 0.625rem 0;
        overflow: hidden;

        .slider-top-list {
          display: flex;

          li {
            font-weight: 600;
            margin-right: 1.75rem;
            cursor: pointer;
            /* 添加文字颜色过渡 */
            transition: color 0.2s ease;

            &:first-child {
              margin-left: 0;
            }

            &:last-child {
              margin-right: 0;
            }

            &:hover {
              color: #f56c6c;
              transition: color 0.2s ease;
            }
          }
        }
      }

      .slider-content {
        display: flex;
        margin-bottom: 0.625rem;

        .slider-switch {
          width: 100%;
        }

        .slider-right {
          margin-left: 0.625rem;

          li {
            &:first-child img {
              border-top-right-radius: 0.5rem;
            }

            &:last-child img {
              border-bottom-right-radius: 0.5rem;
            }

            img {
              width: 12rem;
              height: 9.1rem;
              object-fit: cover;
              overflow: hidden;
              /* 图片悬停过渡 */
              transition: transform 0.3s ease;
            }

            &:hover img {
              transform: scale(1.05);
            }

            &:not(:last-child) {
              margin-bottom: 1.2rem;
            }
          }
        }
      }

      .slider-right-detail {
        display: none;
        position: absolute;
        top: 0.625rem;
        left: 0;
        width: 100%;
        min-height: 33rem;
        background: #ffffff;
        border-radius: 0.5rem;
        border: 0.0625rem solid #f60101;
        padding: 1rem;
        z-index: 1000; // 确保在轮播图之上
        /* 二级菜单显示/隐藏过渡 */
        transition:
          opacity 0.2s ease,
          transform 0.2s ease;
        opacity: 0;
        transform: translateY(-10px);

        &.is-visible {
          display: block;
          opacity: 1;
          transform: translateY(0);
        }

        .slider-top-detail-flex {
          display: flex;
          align-items: flex-start;
          font-size: 0.875rem;

          &:not(:last-child) {
            margin-bottom: 1rem;
          }

          .flex-title {
            width: 6rem;
            font-size: 0.75rem;
            color: #666;
            line-height: 1.5;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: 1.5rem;
            font-weight: 700;
          }

          .flex-content {
            flex: 1;
            display: flex;
            align-items: flex-start;

            .slider-right-detail-list {
              display: flex;
              flex-wrap: wrap;
              gap: 0.3rem;
              align-items: flex-start;

              li > a {
                color: rgb(0, 0, 0);
                font-size: 0.875rem;
                line-height: 1.5;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 1.5rem;
                min-height: 1.5rem;
                /* 三级分类链接过渡 */
                transition: all 0.2s ease;

                &.third-level-link {
                  font-size: 0.75rem;
                  color: #666;
                  line-height: 1.5;
                  height: 1.5rem;
                  min-height: 1.5rem;
                  text-align: center;
                  padding: 0.2rem 0.5rem;
                  border-radius: 0.25rem;
                }

                &:hover {
                  color: red;
                  background: #f0f0f0;
                  transform: translateY(-2px);
                }
              }
            }
          }
        }
      }
    }

    .menu-item-tool {
      flex: 13.9875rem;
      margin: 0.625rem;

      .tool-top {
        display: flex;
        align-items: center;
        justify-content: center;

        .tool-top-img {
          img {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            cursor: pointer;
            /* 头像悬停过渡 */
            transition: transform 0.3s ease;
          }

          &:hover img {
            transform: scale(1.1);
          }
        }

        .tool-top-right {
          font-size: 0.875rem;
          margin-left: 0.675rem;
          text-align: center;

          h1 {
            padding-bottom: 0.25rem;
            font-weight: 600;
          }

          a {
            /* 登录注册链接过渡 */
            transition: color 0.2s ease;

            &:hover {
              color: #f56c6c;
            }

            &:last-child {
              margin-left: 1rem;
            }
          }
        }
      }

      // 定义混合宏
      @mixin coupon-style($image) {
        height: 4.1875rem;
        background-image: url($image);
        background-position: 100% 0;
        background-size: contain;
        text-align: center;
        margin: 0.625rem 0;
        border-radius: 0.5rem;
        font-size: 0.875rem;
        /* 优惠券悬停过渡 */
        transition: transform 0.3s ease;

        &:hover {
          transform: translateY(-3px);
        }

        h1 {
          height: 38px;
          line-height: 38px;
          color: red;
          font-weight: 700;
        }
        a {
          font-size: 0.75rem;
          /* 链接颜色过渡 */
          transition: color 0.2s ease;

          &:hover {
            color: #f56c6c;
          }
        }
      }

      // 应用混合宏
      .tool-coupon {
        @include coupon-style('@/assets/images/coupon.png');
      }

      .tool-member {
        @include coupon-style('@/assets/images/member.png');
      }

      .tool-list {
        .tool-list-style {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          li {
            font-size: 0.75rem;
            text-align: center;
            cursor: pointer;
            /* 工具项悬停过渡 */
            transition: all 0.3s ease;
            padding: 0.5rem;
            border-radius: 0.5rem;

            &:hover {
              background: #f0f0f0;
              transform: translateY(-3px);

              h1 {
                color: #f56c6c;
                transition: color 0.2s ease;
              }
            }

            img {
              width: 3.5rem;
              height: 3.2rem;
              /* 图标过渡 */
              transition: transform 0.3s ease;
            }

            &:hover img {
              transform: scale(1.1);
            }

            h1 {
              margin-top: 0.5rem;
              transition: color 0.2s ease;
            }
          }
        }
      }

      .menu-item-news {
        display: flex;
        align-items: center;
        height: 2.25rem;
        line-height: 2.25rem;
        background: #f5f5f5;
        border-radius: 0.25rem;
        margin: 0.625rem 0;
        box-sizing: border-box;
        font-size: 0.875rem;
        /* 新闻项悬停过渡 */
        transition: all 0.3s ease;

        &:hover {
          background: #e8e8e8;
          transform: translateX(5px);
        }

        span {
          margin: 0 0.625rem;
          color: red;
          font-weight: 700;
        }

        a {
          flex: 1;
          display: block;
          width: 8.125rem;
          color: rgba(0, 0, 0, 0.85);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          /* 文字颜色过渡 */
          transition: color 0.2s ease;

          &:hover {
            color: #f56c6c;
          }
        }
      }
    }
  }
}

@media (max-width: 1190px) {
  .menu-item-tool {
    display: none;
  }
}

@media (max-width: 992px) {
  .menu-item-list {
    display: none;
  }
}
</style>
